<template>
  <div class="list">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="lists" v-for="item in listTu" :key="item.id">
      <div class="tou">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item2, index) in lunlists" :key="index">
            <img v-lazy="item2.src" class="img" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="zhong">
        <div class="zhong-s">
          <h2>{{ item.title }}</h2>
          <hr />
        </div>
        <div class="zhong-x">
          <p>
            市场价: <i>{{ item.sell_price }}</i>
            <span
              >销售价: <i class="pali">￥{{ item.market_price }}</i>
            </span>
          </p>
          <div class="zhong-pp">
            <span>购买数量:</span>
            <van-stepper v-model="value" integer class="zhong-in" />
          </div>
          <div class="zhong-aa">
            <button class="zhong-a1">立即购买</button>
            <button class="zhong-a2" @click="onuerFn"
            
            
            >加入购物车</button>
          </div>
        </div>
      </div>
      <div class="xia">
        <h3>商品参数</h3>
        <hr />
        <div class="xia-a">商品货号:{{ item.goods_no }}</div>
        <div class="xia-b">库存情况:{{ item.stock_quantity }}</div>
        <div class="xia-c">上架时间:{{ item.add_time | filters }}</div>
      </div>
      <div class="di">
        <button
          @click="$router.push({ path: `/layout/mytuwenjies/${item.id}` })"
        >
          图文介绍
        </button>
        <button
          class="di-x"
          @click="$router.push({ path: `/layout/mypinglun/${item.id}` })"
        >
          商品评论
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { getdescData, getthumimagesData } from "../../apis/api";
import { getUserId, setUserId } from "@/utils/locaIdata";
// console.log(getUserId);
export default {
  data() {
    return {
      listTu: [],
      value: 1,
      lunlists: [],
      listpo: [],
    };
  },
  async created() {
    const res = await getdescData(this.$route.params.id);
    console.log(res);
    this.listTu = res.message;
    const res2 = await getthumimagesData(this.$route.params.id);
    console.log('aaa',res2);
    this.lunlists = res2.message;
  },
  methods: {
    onuerFn() {
      //点击然后获取数据，数据本地存储是没有的

  const listData = getUserId();
      //打印出来的是空数组
      // console.log(listData);

    
      // 然后过滤掉重复的id
      this.listpo = listData.filter(
        (item) => 
      {
          
          return   item.id !== this.$route.params.id
        }
      );
      // console.log(this.listpo);
      //添加到本地去
      this.listpo.unshift({
        // 添加id
        id: this.$route.params.id,
        //数量
        coust: this.value,
      });
      // console.log(this.listpo);
      setUserId(this.listpo);
      
      this.$router.push({path:'/layout/shopping'})
    },
  },
};
</script>

<style lang="less" scoped>
div.list {
  padding-bottom: 25px;
  // padding: 0 5px;
  padding-left: 10px;
  padding-right: 10px;
  van-nav-bar {
    template {
    }
  }

  div.lists {
    div.tou {
      border: 1px solid #000;
      height: 350px;
      padding: 3px;
      // background-color: red;
      .img {
        width: 100%;
        height: 283px;
      }
      //        .my-swipe .van-swipe-item {
      //     color: #fff;
      //     font-size: 20px;
      //     line-height: 150px;
      //     text-align: center;
      //     background-color: #39a9ed;
      //   }
    }

    div.zhong {
      padding: 0 10px;
      margin-top: 6px;
      height: 250px;
      // background-color: aqua;
      border: 1px solid #000;

      div.zhong-s {
        h2 {
          color: rgb(29, 118, 235);
          font-size: 20px;
        }
      }

      div.zhong-x {
        .zhong-aa {
          margin-top: 20px;
          .zhong-a1 {
            background-color: rgb(24, 81, 238);
            color: #ffff;
            line-height: 15px;
            height: 30px;
          }
          .zhong-a2 {
            background-color: red;
            color: #fff;
            line-height: 15px;
            height: 30px;
          }
          button {
            border: none;
            border-radius: 5px;
            //   width: 20px;
            //    display: flex;
            height: 25px;
          }
        }
        .zhong-pp {
          span {
            margin-right: 150px;
          }

          .zhong-in {
            position: absolute;
            bottom: 55px;
            right: 92px;
          }
        }
        p {
          font-size: 15px;
          i {
            font-size: 13px;
            text-decoration: line-through;
          }

          span {
            margin-left: 20px;
            i {
              font-size: 20px;
              color: red;
              text-decoration: none;
            }
          }
        }

        button {
        }
      }
    }

    div.xia {
      padding: 0 10px;
      margin-top: 6px;
      border: 1px solid #000;
      // background-color: antiquewhite;
      height: 150px;
      .xia-a {
        display: flex;
        margin-left: 55px;
      }
      .xia-b {
        display: flex;
        margin-left: 55px;
      }
      .xia-c {
        display: flex;
        margin-left: 55px;
      }
      h3 {
        font-size: 18px;
        display: flex;
        margin-left: 10px;
      }

      p {
      }
    }

    div.di {
      margin-top: 6px;
      border: 1px solid #000;
      height: 150px;
      // background-color: aquamarine;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      button {
        background-color: #ffff;
        border: 1px solid aqua;
        width: 300px;
        height: 35px;
        color: aqua;
      }
      .di-x {
        background-color: #ffff;
        border: 1px solid red;
        width: 300px;
        height: 35px;
        color: red;
      }
    }
  }
}
</style>